<template>
	<view>
		<cu-custom bgColor="bg-white" isBack="true">
			<block slot="content">账户设置</block>
		</cu-custom>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<!--  -->
		<view class="layout" v-show="!showLoading">

			<!-- 头部 -->
			<view class="top">

				<view class="avtor">
					<!-- 右臂拿 -->
					<view class="avzi">头像</view>
					<button class="avorimg" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<!-- <button class="login_a" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"></button> -->
						<image :src="information.avatar" mode="aspectFit"></image>
					</button>
				</view>
			</view>

			<!-- 名字 -->
			<view class="content">
				<!-- 单行 -->
				<view class="niconamebox">
					<!-- 左边 -->
					<view class="nicozi">昵称</view>
					<input type="text" class="nicoinput" v-model="information.nickname" maxlength="8" />
				</view>

				<view class="niconamebox">
					<!-- 左边 -->
					<view class="nicozi">手机号</view>
					<input type="text" class="nicoinput" v-model="information.mobile" />
				</view>
			</view>

			<!-- 点击保存 -->
			<view class="btnsave" @click="savethis">保存</view>


		</view>
	</view>
</template>

<script>
	import request from '@/common/request.js';
	import {
		loadingType
	} from '@/utils/type';
	export default {
		data() {
			return {
				information: {
					mobile: '',
					nickname: '',
					avatar: ''
				}
			};
		},
		onLoad() {
			this.loginfo()
		},

		methods: {
			loginfo() {
				const img = uni.getStorageSync('imgsrc')
				console.log("本地", img)
				const uid = uni.getStorageSync('uid');
				uni.request({
					url: request.baseUrl + 'u-role_config',
					method: 'GET',
					data: {
						uid: uid // 传递 uid 作为 Query 参数
					},
					success: (res) => {
						console.log(res);
						if (res.data.code === 200) {
							// this.information = res.data.data;
							// console.log("得到", this.information);
							if (img !== '') {
								this.information.avatar = res.data.data.avatar
								this.information.mobile = res.data.data.mobile
								this.information.nickname = res.data.data.nickname
								console.log("改变后有", this.information.avatar)
							} else {
								this.information = res.data.data;
								console.log("原得到", this.information);
							}
						} else {
							console.log(res.data.data);
						}
					}
				});
			},
			savethis() {
				const uid = uni.getStorageSync('uid');
				// const _this = this
				uni.request({
					url: request.baseUrl + 'u-user_edit',
					method: 'POST',
					header: {
						'Content-Type': 'application/json',
					},
					data: {
						uid: uid,
						nickname: this.information.nickname,
						avatar: this.information.avatar,
						mobile: this.information.mobile
					},
					success: (res) => {
						if (res.data.code === 200) {
							// _this.uploadimg()
							uni.showToast({
								title: res.data.msg,
								icon: 'success'
							}).then(() => {
								setTimeout(() => {
									uni.redirectTo({
										url: '/pages/index/index'
									});
								}, 1500);
							});
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'error'
							})
						}
						console.log('用户信息更新成功', res.data);
						console.log('长度', this.information.nickname.length)
					},
					fail: (err) => {
						console.error('更新用户信息失败', err);
					}
				});
			},
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail;
				let _this = this;
				uni.uploadFile({
					url: request.baseUrl + 'p-icon', // 仅为示例，非真实的接口地址
					filePath: avatarUrl,
					name: 'image',
					success: (res) => {
						// request.baseUrl = 
						let data = JSON.parse(res.data);
						console.log("图片上传时", data);
						setTimeout(() => {
							_this.information.avatar_logo = request.baseUrl + data.data.uri;
							// _this.avatar = data.data.avatar;
							_this.information.avatar = request.baseUrl + data.data.uri;
							let paramsList = {
								avatar:  _this.information.avatar //头像
							}
							uni.setStorageSync('imgsrc', paramsList)
							uni.showToast({
								title: '上传成功'
							})
						}, 1000)
					}
				});
			},
			// goPage(){
			// 	uni.navigateTo({
			// 		url:'/pages/account/avatar'
			// 	})
			// }

		}
	};
</script>

<style lang="scss" scoped>
	.layout {
		background: #efefef;
		height: 100vh;

		.top {
			width: 750rpx;
			height: 250rpx;
			background: #ffffff;
			border: 1px solid #ffffff;
			border-bottom-right-radius: 10rpx;
			border-bottom-left-radius: 10rpx;

			.avtor {
				width: 750rpx;
				height: 130rpx;
				// border: 1px solid red;
				margin: 100rpx 0 0 0;
				display: flex;

				.avzi {
					width: 90rpx;
					height: 34rpx;
					line-height: 34rpx;
					font-size: 36rpx;
					color: #222222;
					font-weight: 500;
					margin: 40rpx 0 0 20rpx;
				}

				.avorimg {
					width: 120rpx;
					height: 117rpx;
					line-height: 117rpx;
					border-radius: 50%;
					padding: 0;
					border: 0;
					overflow: hidden;
					// border: 1px solid red;
					margin: 0 0 0 500rpx;
					position: relative;

					.login_a {
						position: absolute;
						width: 120rpx;
						height: 117rpx;
						background: rgba(0, 0, 0, 0.1);
						border-radius: 117rpx;

					}

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		// 中间
		.content {
			width: 750rpx;
			height: 300rpx;
			line-height: 300rpx;
			background: #ffffff;
			// border: 1px solid red;
			margin: 20rpx 0 0 0rpx;
			// padding: 50rpx 0;

			.niconamebox {
				width: 750rpx;
				height: 140rpx;
				// border: 1px solid green;
				display: flex;

				.nicozi {
					width: 101rpx;
					height: 30rpx;
					font-weight: 500;
					line-height: 30rpx;
					font-size: 30rpx;
					color: #333333;
					// border: 1px solid red;
					margin: 58rpx 0 0 32rpx;
				}

				.nicoinput {
					width: 500rpx;
					height: 140rpx;
					border-bottom: 1rpx solid #efefef;
					margin: 0 0 0 100rpx;
					box-sizing: border-box;
					padding: 0 0 0 300rpx;
				}
			}
		}

		.btnsave {
			margin: 20rpx 0 0 0;
			width: 750rpx;
			height: 100rpx;
			box-sizing: border-box;
			background: #ffffff;
			box-sizing: border-box;

			padding: 30rpx 0 0 350rpx;
			font-size: 35rpx;
		}
	}
</style>